<template>
    <a-modal
      title="重置用户密码"
      :width="640"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" v-bind="formLayout">
          <a-form-item label="ID" style="display: none;">
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-form-item label="名字">
            {{ mdl.realName }}
          </a-form-item>
          <a-form-item label="密码">
            <a-input v-decorator="['newPwd', { rules: [{ required: true, message: '请输入密码' },  { pattern: /^[\da-zA-Z\s]{1,12}$/, message: '请输入数字或字母且长度满足1-12的密码'}] }]" />
          </a-form-item>
        </a-form>
      </a-spin>
  
    </a-modal>
  </template>
  
  <script>
  import pick from 'lodash.pick'
  const fields = ['id','newPwd']
  
  export default {
    name: 'UserRole',
    data () {
      return {
        visible: false,
        formLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 }
          }
        },
        form: this.$form.createForm(this),
        mdl: {},
        confirmLoading: false
      }
    },
    created () {
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
      // 当 model 发生改变时，为表单设置值
      this.$watch('mdl', () => {
        if (this.mdl) {
          this.mdl.op = 1
          this.form.setFieldsValue(pick(this.mdl, fields))
        }
      })
    },
    methods: {
      changeOp (e) {
        this.mdl.op = e.target.value
      },
      handleOk () {
        this.$emit('ok')
      },
      handleCancel () {
        this.visible = false
        this.form.resetFields()
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  